<template>
	<view class="pages font-12">
		<view class="form padding">
			<view class="form-line">
				<view class="form-line-left flex5">
					<view class="form-line-text">
						车牌：
					</view>
					<view class="form-line-text text-grey3">
						{{ data.licensePlate }}
					</view>
				</view>
				<view class="form-line-left flex5">
					<view class="form-line-text">
						司机：
					</view>
					<view class="form-line-text text-grey3">
						<text>{{ data.driverName }}</text>
						<text class="margin-left-sm text-blue1" @click="makePhoneCall(data.driverPhone)">{{ data.driverPhone }}</text>
					</view>
				</view>
			</view>
			<view class="form-line">
				<view class="form-line-text">
					路线：
				</view>
				<view class="form-line-text text-grey3">
					{{ addressData.join(' - ') }}
				</view>
			</view>
			<view class="form-line">
				<view class="form-line-text">
					时间：
				</view>
				<view class="form-line-text text-grey3">
					{{ data.startTime }} - {{ data.endTime }}
				</view>
			</view>
			<view class="form-line">
				<view class="form-line-left flex5">
					<view class="form-line-text">
						已占座：
					</view>
					<view class="form-line-text text-grey3">
						{{ data.reserveSeatNum }}
					</view>
				</view>
				<view class="form-line-left flex5">
					<view class="form-line-text">
						可占座：
					</view>
					<view class="form-line-text text-grey3">
						{{ data.remainderSeatNum }}
					</view>
				</view>
			</view>
		</view>
		<view class="form padding margin-top-sm">
			<view class="form-line">
				<view class="form-line-text">
					申请人：
				</view>
				<input class="uni-input font-12" type="text" placeholder="请输入申请人" v-model="nickName" disabled />
			</view>
			<view class="form-line">
				<view class="form-line-text">
					申请部门：
				</view>
				<input class="uni-input font-12" type="text" placeholder="请输入申请部门" v-model="deptName" disabled />
			</view>
			<view class="form-line">
				<view class="form-line-text">
					开始地点：
				</view>
				<input class="uni-input font-12" type="text" placeholder="请选择地点" v-model="startLocation" disabled />
				<!-- <uni-data-select v-model="startLocationInde" :localdata="address" @change="changeAddress" placeholder="请选择地点"></uni-data-select> -->
			</view>
			<view class="form-line">
				<view class="form-line-text">
					结束地点：
				</view>
				<input class="uni-input font-12" type="text" placeholder="请选择地点" v-model="endLocation" disabled />
				<!-- <uni-data-select v-model="endLocationIndex" :localdata="address" @change="changeAddress" placeholder="请选择地点"></uni-data-select> -->
			</view>
			<view class="form-line">
				<view class="form-line-text">
					占座数量：
				</view>
				<input class="uni-input font-12" type="number" maxlength="1" placeholder="请输入座位" v-model="occupaSeatNum" />
			</view>
			<view class="form-line">
				<view class="form-line-text">
					是否有货物：
				</view>
				<radio-group @change="radioChange" class="radios">
					<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
						<radio class="radio-scale" :value="item.value" :checked="index === current" />
						<view>{{item.name}}</view>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="addBtn">
			<button type="primary" @click="add()" style="width: 400upx;border-radius: 60upx;">拼 车</button>
		</view>
	</view>
</template>

<script>
	import { makePhoneCall } from '@/utils/common'
	import storage from '@/utils/storage'
	import { poolCar,getInfo } from '@/api/system/stroke'
	export default {
		data() {
			return {
				id: 0,
				current: 0,
				nickName: '',
				deptName: '',
				data: [],
				addressData: [],
				startLocation: '',
				startLocationInde: 0,
				endLocation: '',
				endLocationIndex: 3,
				occupaSeatNum: 1,
				address: [],
				items: [
					{value: '0', name: '没有'},
					{value: '1', name: '有'},
				],
				queryStatus: false,
			};
		},
		onLoad(options) {
			this.nickName = storage.get('vuex_user').nickName;
			this.deptName = storage.get('vuex_user').dept.deptName;
			
			if(options.id){
				this.id = options.id;
			}
			
			if(this.id == 0){
				this.$modal.msgError("参数错误");
			}else{
				this.getData();
			}
		},
		methods: {
			/**
			 * 获取数据
			 */
			getData(){
				this.$modal.loading("请求中");
				getInfo(this.id).then(res => {
					this.$modal.closeLoading();
					console.log('获取详情成功' , res.data);
					
					this.data = res.data;
					this.startLocation = res.data.startLocation;
					this.endLocation = res.data.endLocation;
					
					this.addressData.push(res.data.startLocation);
					if(res.data.transitPlace) this.addressData = this.addressData.concat(res.data.transitPlace);
					this.addressData.push(res.data.endLocation);
					
					// this.addressData.forEach((item , index) => {
					// 	this.address.push({value: index, text: item});
					// });
					
					// this.endLocationIndex = this.address.length - 1;
				}).catch(err => {
					console.log('获取详情失败' , err);
				});
			},
			/**
			 * 拼车
			 */
			add(){
				if(typeof this.startLocationInde == 'string'){
					this.$modal.msgError("请选择开始地点");
				}else if(typeof this.endLocationIndex == 'string'){
					this.$modal.msgError("请选择结束地点");
				}else if(this.startLocationInde == this.endLocationIndex){
					this.$modal.msgError("开始地点和结束地点不能一样");
				}else if(this.occupaSeatNum <= 0){
					this.$modal.msgError("请输入占座数");
				}else if(this.occupaSeatNum > this.data.remainderSeatNum){
					this.$modal.msgError("占座数不可大于可占座数");
				}else if(!this.queryStatus){
					this.queryStatus = true;
					let params = {
						id: this.id,
						// startLocationLabel: this.address[this.startLocationInde].text,
						startLocationLabel: this.startLocation,
						// endLocationLabel: this.address[this.endLocationIndex].text,
						endLocationLabel: this.endLocation,
						occupaSeatNum: this.occupaSeatNum,
						isGoods: this.items[this.current].value,
					};
					
					this.$modal.loading("请求中");
					this.handleAdd(params);
				}
			},
			/**
			 * 拼车处理
			 * @param {Object} params
			 */
			handleAdd(params){
				poolCar(params).then(() => {
					this.queryStatus = false;
					this.$modal.msgSuccess('拼车成功' , () => {
						setTimeout(() => {
							this.$tab.redirectTo('/pages/index');
						} , 2000);
					});
				}).catch(err => {
					this.queryStatus = false;
					console.log('拼车失败' , err);
				});
			},
			/**
			 * 拨打电话
			 * @param {Object} phone
			 */
			makePhoneCall(phone){
				makePhoneCall(phone);
			},
			changeAddress(e){
				console.log(e , typeof e);
			}
		}
	}
</script>

<style lang="scss">
	.flexCenter {
		display: flex;
		align-items: center;
	}
	
	.flexCenterBetween {
		@extend .flexCenter;
		justify-content: space-between;
	}
	
	.form {
		background-color: #FFFFFF;
	
		.form-line {
			@extend .flexCenter;
			padding: 20upx 0upx;
			border-bottom: 1px solid #E2E2E2;
			
			.uni-input{
				flex: 1;
			}
			
			.form-line-left{
				@extend .flexCenter;
			}
			
			&:last-child{
				border: none
			}
		}
		
		.title{
			@extend .flexCenterBetween;
			border-bottom: 1px solid #E2E2E2;
		}
	}
	
	.radios{
		@extend .flexCenter;
	}
	
	
	::v-deep .uni-label-pointer{
		@extend .flexCenter;
	}
	
	::v-deep .uni-date-x .icon-calendar{
		display: none;
	}
	
	::v-deep .uni-date__x-input{
		padding-left: 0px;
	}
	
	.addBtn {
		width: 400upx;
		margin: 100upx auto;
	}
</style>
